<!--  -->
<template>
  <div class="slide">
    <el-aside :style="{ width: isCollapse ? 64 : 150 }">
      <el-menu
        class="el-menu-vertical-demo"
        menu-trigger="click"
        :unique-opened="true"
        active-text-color="#409eff"
        :collapse="isCollapse"
        router
        :default-active="this.$route.path"
      >
        <!-- ========================================== -->
        <el-menu-item index="/home">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <el-submenu index="教师管理">
          <template slot="title">
            <i class="el-icon-s-check"></i>
            <span slot="title">教师管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/teacher/teacherList">教师列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <!-- ========================================== -->
        <el-submenu index="学生管理">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span slot="title">学生管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/student/studentList">学生列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <!-- ========================================== -->
        <el-submenu index="课程管理">
          <template slot="title">
            <i class="el-icon-s-data"></i>
            <span slot="title">课程管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/course/courseList">课程列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <!--  -->
        <el-submenu index="成绩管理">
          <template slot="title">
            <i class="el-icon-s-order"></i>
            <span slot="title">成绩管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/grade/gradeList">成绩列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  name: "slide",
  data() {
    return {
      isCollapse: false,
    };
  },
  created() {
    this.$bus.$on("change_isCollapse", (change_collapse) => {
      this.isCollapse = change_collapse;
    });
    console.log(this.$router);
    console.log(this.$route);
  },
  methods: {
    // open：sub-menu 展开的回调
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // close：open：sub-menu 关闭的回调
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    //select	菜单激活回调
    // handleSelect(index, path) {
    //   console.log(index, path);
    //   this.breadcrumb_list = path;
    // },
  },
};
</script>

<style  scoped>
.el-aside {
  color: #333;
  height: 100%;
}
.el-submenu .el-menu-item {
  min-width: 150px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 149px;
}
</style>
